<template>
  <div class="newAlbum">
    <a href="javascript:;" class="left" @click="prevItem"></a>
    <a href="javascript:;" class="right" @click="nextItem"></a>
    <div class="newAlbum-center">
      <album-box v-for="(item, index) in newAlbumList" :key="index">
        <el-image slot="img" :src="item.blurPicUrl" lazy />
        <a href="javascript:;" slot="p1">{{ item.name }}</a>
        <a href="javascript:;" slot="p2">{{ item.artist.name }}</a>
      </album-box>
    </div>
  </div>
</template>

<script>
import albumBox from '../../../components/common/albumBox.vue'
export default {
  components: { albumBox },
  props: {
    newAlbumList: {
      type: Array,
      default() {
        return []
      }
    }
  },
  methods: {
    prevItem() {
      let center = document.querySelector('.newAlbum-center')
      center.style.transform = 'translate(0px,0px)'
    },
    nextItem() {
      let center = document.querySelector('.newAlbum-center')
      center.style.transform = 'translate(-675px,0px)'
    }
  }
}
</script>

<style lang="scss" scoped>
.album-box {
  width: 118px;
  height: 150px;
}
.newAlbum {
  width: 100%;
  height: 180px;
  margin-top: 20px;
  border: 1px solid #d3d3d3;
  background-color: #f5f5f5;
  position: relative;
  padding-left: 16px;
  overflow: hidden;
  .left,
  .right {
    position: absolute;
    width: 17px;
    height: 17px;
    background: url('https://s2.music.126.net/style/web2/img/index/index.png?6f7122023fe4b0e7c59ac1d1226d1064')
      no-repeat 0 9999px;
    top: 50%;
    margin-top: -8.5px;
  }
  .left {
    left: 0;
    background-position: -260px -75px;
    z-index: 20;
    &:hover {
      background-position: -280px -75px;
    }
  }
  .right {
    right: 0;
    z-index: 20;
    background-position: -300px -75px;
    &:hover {
      background-position: -320px -75px;
    }
  }
  .newAlbum-center {
    //  position: absolute;
    //  left: 0;
    width: 1600px;
    height: 180px;
    padding-top: 30px;
    transition: transform 0.1s;
    .album-box {
      margin-right: 17px;
      float: left;
    }
  }
}
</style>
